<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>chartjs-plugin-colorschemes sample</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
	<script src="../dist/chartjs-plugin-colorschemes.js"></script>
	<style>
		canvas {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}
		.chart {
			margin: auto;
			width: 75%;
		}
		.text-center {
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="chart">
		<canvas id="myChart"></canvas>
	</div>
	<div>
		<p class="text-center">
			<button id="randomizeData">Randomize Data</button>
			<button id="addDataset">Add Dataset</button>
			<button id="removeDataset">Remove Dataset</button>
			<button id="addData">Add Data</button>
			<button id="removeData">Remove Data</button>
		</p>
		<p class="text-center">
			Color Scheme:
			<select id="scheme"></select>
			Background:
			<select id="background">
				<option value="white" selected>White</option>
				<option value="black">Black</option>
			</select>
		</p>
	</div>

	<script>
		function randomScalingFactor() {
			return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
		}

		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
		var config = {
			type: 'line',
			data: {
				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
				datasets: [1, 2, 3].map(function(i) {
					return {
						label: 'Dataset ' + i,
						data: [0, 0, 0, 0, 0, 0, 0].map(randomScalingFactor),
						fill: false
					};
				})
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: 'Chart.js Line Chart'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Month'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Value'
						}
					}]
				},
				plugins: {
					colorschemes: {
						scheme: 'brewer.Paired12'
					}
				}
			}
		};

		window.onload = function() {
			var colorSchemes = Chart.colorschemes;
			var options = '';

			Object.keys(colorSchemes).forEach(function(category) {
				Object.keys(colorSchemes[category]).forEach(function(scheme) {
					var schemeName = category + '.' + scheme;
					options += '<option value="' + schemeName + '"' +
						(schemeName === 'brewer.Paired12' ? ' selected>' : '>') +
						schemeName + '</option>';
				});
			});
			document.getElementById('scheme').innerHTML = options;

			var ctx = document.getElementById('myChart').getContext('2d');
			window.myChart = new Chart(ctx, config);
		};

		document.getElementById('randomizeData').addEventListener('click', function() {
			config.data.datasets.forEach(function(dataset) {
				dataset.data = dataset.data.map(function() {
					return randomScalingFactor();
				});

			});

			window.myChart.update();
		});

		document.getElementById('addDataset').addEventListener('click', function() {
			var newDataset = {
				label: 'Dataset ' + (config.data.datasets.length + 1),
				data: [],
				fill: false
			};

			for (var index = 0; index < config.data.labels.length; ++index) {
				newDataset.data.push(randomScalingFactor());
			}

			config.data.datasets.push(newDataset);
			window.myChart.update();
		});

		document.getElementById('addData').addEventListener('click', function() {
			if (config.data.datasets.length > 0) {
				var month = MONTHS[config.data.labels.length % MONTHS.length];
				config.data.labels.push(month);

				config.data.datasets.forEach(function(dataset) {
					dataset.data.push(randomScalingFactor());
				});

				window.myChart.update();
			}
		});

		document.getElementById('removeDataset').addEventListener('click', function() {
			config.data.datasets.pop();
			window.myChart.update();
		});

		document.getElementById('removeData').addEventListener('click', function() {
			config.data.labels.splice(-1, 1); // remove the label first

			config.data.datasets.forEach(function(dataset) {
				dataset.data.pop();
			});

			window.myChart.update();
		});

		document.getElementById('scheme').addEventListener('change', function(event) {
			config.options.plugins.colorschemes.scheme = event.target.value;

			window.myChart.update();
		});

		document.getElementById('background').addEventListener('change', function(event) {
			var globalDefaults = Chart.defaults.global;
			var options = config.options;
			var xGridLines = options.scales.xAxes[0].gridLines;
			var yGridLines = options.scales.yAxes[0].gridLines;
			var tooltips = options.tooltips;

			document.getElementsByTagName('body')[0].bgColor = event.target.value;
			if (event.target.value === 'white') {
				xGridLines.color = yGridLines.color = 'rgba(0, 0, 0, 0.1)';
				xGridLines.zeroLineColor = yGridLines.zeroLineColor = 'rgba(0, 0, 0, 0.25)';
				globalDefaults.defaultFontColor = '#666';
				tooltips.backgroundColor = 'rgba(0, 0, 0, 0.8)';
				tooltips.titleFontColor = tooltips.bodyFontColor = '#fff';
			} else {
				xGridLines.color = yGridLines.color = 'rgba(255, 255, 255, 0.2)';
				xGridLines.zeroLineColor = yGridLines.zeroLineColor = 'rgba(255, 255, 255, 0.5)';
				globalDefaults.defaultFontColor = '#ccc';
				tooltips.backgroundColor = 'rgba(255, 255, 255, 0.8)';
				tooltips.titleFontColor = tooltips.bodyFontColor = '#000';
			}
			window.myChart.update();
		});
	</script>
</body>

</html>
